<template>
	<dv-digital-flop :config="userConfig" />
</template>

<script>
function formatter(number) {
	const numbers = number
		.toString()
		.split("")
		.reverse();
	const segs = [];

	while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

	return segs
		.join(",")
		.split("")
		.reverse()
		.join("");
}

export default {
	name: "DDigitalflop",
	data() {
		return {};
	},
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
		width: {
			type: Number,
			default: 200,
		},
		height: {
			type: Number,
			default: 100,
		},
		ratio: {
			type: Number,
			default: 1,
		},
	},
	computed: {
		number() {
			return [this.props[1].fields[0].value[0].value.value];
		},
		content() {
			return this.props[1].fields[0].value[1].value.value;
		},
		toFixed() {
			return this.props[1].fields[0].value[2].value.value;
		},
		fontsize() {
			return isNaN(this.props[1].fields[0].value[3].value.value) ? 50 : 50;
		},
		userConfig() {
			let config = {
				number: this.number,
				content: `{nt}${this.content}`,
				toFixed: 0,
				formatter,
			};
			return { ...config };
		},
	},
};
</script>
